<template>
    <div class="main">
        <side-bar-menu side-bar-name="entry/choose/1"></side-bar-menu>
        <head-nav-bar title-value="入围选取"></head-nav-bar>

        <div class="main-frame">

            <Spin size="large" fix v-if="spinShow"></Spin>
            <Affix :offset-top="30">
                <Button type="success">已选择入围数量：{{ entryValue }}</Button>
            </Affix>

            <div style="right: 10px;top: 10px;position: absolute">
                <Tooltip :content="timeRangeTip" always placement="left">
                    <span>投票时间：</span>
                </Tooltip>

                <DatePicker type="daterange"
                            :value="timeRange"
                            confirm
                            @on-change="handleChange"
                            @on-ok="handleOk"
                            placement="left-start"
                            placeholder="选择投票时间"
                            style="width: 200px;">

                </DatePicker>
            </div>

            <Scroll :on-reach-bottom="handleReachBottom" :height="500">
                <Row :gutter="16">
                    <Col span="8" v-for="(imgs, i) in imgList" :key="i" style="margin-top: 10px ">
                        <Card :bordered="false" style="height: 300px">
                            <p slot="title">
                                <Icon type="ios-person-outline"></Icon>
                                {{ authors[i] }}
                            </p>
                            <Checkbox v-model="isEntryList[i]" slot="extra" @on-change="checkEntry(i, ids[i])">入围</Checkbox>
                            <Carousel loop>
                                <CarouselItem v-for="(img, j) in imgs" :key="j">
                                    <img :src="'http://cdn.maxstudiozhuhai.com/' + img" alt="" class="" height="200">
                                </CarouselItem>
                            </Carousel>
                        </Card>
                    </Col>
                </Row>
            </Scroll>

        </div>
    </div>
</template>

<script>
    import SideBarMenu from './components/SideBarMenu'
    import HeadNavBar from './components/HeadNavBar'
    import util from '../libs/util'

    export default {
        data() {
            return {
                theme: 'dark',
                current: 0,
                imgList: [],
                authors: [],
                phones: [],
                ids: [],
                isEntryList: [],
                spinShow: false,
                entryValue: 0,
                timeRange: [],
                timeRangeTip: '未设置',
            }
        },
        components: {
            SideBarMenu,
            HeadNavBar
        },
        methods: {
            handleReachBottom() {

                util.ajax({
                    url: '/admin/enroll/page',
                    method: 'get',
                    params: {page: this.current, size: 9},
                }).then(response => {

                    var data = response.data.data;

                    for (var i = 0; i < data.length; i++) {
                        this.imgList.push(data[i].imgHash);
                        this.authors.push(data[i].author);
                        this.phones.push(data[i].phone);
                        this.ids.push(data[i].id);
                        this.isEntryList.push(data[i].entry)
                    }

                    this.current++

                }).catch(error => {//失败
                    console.log(error)
                });
            },
            checkEntry(index, id) {
                this.spinShow = true;

                var isCancel = !this.isEntryList[index];

                var url = '';

                if (isCancel) {
                    url = '/admin/entry/cancel';
                } else {
                    url = '/admin/entry/add'
                }

                util.ajax({
                    url: url,
                    method: 'post',
                    params: {activityId: this.$route.params.activityId, enrollId: id},
                }).then(response => {

                    if (response.data.errorCode === 0) {
                        this.$Message.success('操作成功');
                    } else {
                        this.$Message.error(response.data.message);
                    }

                    this.spinShow = false;
                    this.updateProgressBar();

                }).catch(error => {//失败
                    console.log(error);
                    this.updateProgressBar();
                    this.spinShow = false;
                });
            },
            updateProgressBar() {

                util.ajax({
                    url: '/admin/entry',
                    method: 'get',
                    params: {activityId: this.$route.params.activityId},
                }).then(response => {

                    var data = response.data.data;

                    this.entryValue = data.length

                }).catch(error => {//失败
                    console.log(error)
                });

            },
            handleChange(date) {
                this.timeRange = date
            },

            handleOk() {
                this.setTimeRange()
            },
            setTimeRange() {

                util.ajax({
                    url: '/admin/activity/vote/time',
                    method: 'post',
                    params: {activityId: this.$route.params.activityId, startTime: this.timeRange[0], endTime: this.timeRange[1]},
                }).then(response => {

                    if (response.data.errorCode === 0) {
                        this.$Message.success('操作成功');
                        this.timeRangeTip = '生效时间：' + this.timeRange[0] + ' 至 ' + this.timeRange[1];

                    } else {
                        this.$Message.error(response.data.message);
                    }

                }).catch(error => {
                    console.log(error);
                    this.$Message.error('网络错误!');
                });
            },
            updateTimeRange() {
                util.ajax({
                    url: '/admin/activity',
                    method: 'get',
                    params: {activityId: this.$route.params.activityId},
                }).then(response => {

                    var data = response.data.data;
                    if (response.data.errorCode === 0) {
                        var startDate = new Date(data.voteStartTime);
                        var endDate = new Date(data.voteEndTime);

                        var start = startDate.getFullYear() + '-' + (startDate.getMonth()+1 < 10 ? '0'+(startDate.getMonth()+1) : startDate.getMonth()+1) + '-' + startDate.getDate();
                        var end = endDate.getFullYear() + '-' + (endDate.getMonth()+1 < 10 ? '0'+(endDate.getMonth()+1) : endDate.getMonth()+1) + '-' + endDate.getDate();

                        this.timeRangeTip = '生效时间：' + start + ' 至 ' + end;
                    }

                }).catch(error => {
                    console.log(error)
                });
            }
        },
        mounted() {

            this.handleReachBottom();

            this.updateProgressBar();

            this.updateTimeRange();
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>



</style>